<script setup>
import { addHoliday, addHolidayBegin, getCourseByCourseIdAPI } from '@/api/home'
import { onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()
const userData = ref({})
const form = ref({})
const courseList = ref([])
const courseTimeList = ref([])
const initDate = async () => {
	const res = await addHolidayBegin()
	if (res) {
		userData.value = res.data
		form.value.realName = userData.value.aoauser.realName
		form.value.userName = userData.value.aoauser.userName
		form.value.faculty = userData.value.aoaclass.faculty
		form.value.major = userData.value.aoaclass.major
		form.value.className = userData.value.aoaclass.className
		form.value.classNo = userData.value.aoaclass.classNo
		userData.value.courses.forEach((el) => {
			courseList.value.push({
				text: el.courseName,
				value: el.id,
				no: el.courseNo,
				teacherNo: el.teacherNo,
			})
		})
		form.value.courseId = courseList.value[0].value
		form.value.courseNo = courseList.value[0].no
		form.value.courseName = courseList.value[0].text
		form.value.auditTeacher = courseList.value[0].teacherNo
		form.value.leaveType = '事假'
		if (route.query.holiday) {
			let holiday = JSON.parse(route.query.holiday)
			form.value.courseNo = holiday.courseNo
			form.value.courseId = courseList.value.find((o) => o.no === holiday.courseNo).value
			form.value.leaveType = holiday.leaveType
			form.value.reason = holiday.reason
			form.value.holidayId = holiday.holidayId
			console.log(form.value.leaveType)
		}
		getCourseByCourseId()
	}
}

const getCourseByCourseId = async () => {
	const res = await getCourseByCourseIdAPI({ courseId: form.value.courseId })
	courseTimeList.value = []
	if (res) {
		res.data.forEach((el) => {
			courseTimeList.value.push({
				text: el.attendClassWeek + '' + el.startTime + '-' + el.endTime,
				startTime: el.startTime,
				endTime: el.endTime,
				value: el.id,
			})
		})
		form.value.courseTime = courseTimeList.value[0].value
		form.value.startTime = courseTimeList.value[0].startTime
		form.value.endTime = courseTimeList.value[0].endTime
	}
}

const changeCourse = (value) => {
	form.value.courseId = value
	let o = courseList.value.find((o) => o.value === value)
	form.value.courseName = o.text
	form.value.courseNo = o.no
	form.value.auditTeacher = o.teacherNo
	getCourseByCourseId()
}

const changeCourseTime = (value) => {
	form.value.courseTime = value
	let o = courseList.value.find((o) => o.value === value)
	form.value.startTime = o.startTime
	form.value.endTime = o.endTime
}

const onSubmit = async () => {
	console.log(form.value)
	const res = await addHoliday(form.value)
	if (res) {
		router.replace({
			path: '/home',
			query: 1,
		})
	}
}

const goBack = () => {
	router.replace({
		path: '/home',
		query: 1,
	})
}

onMounted(() => {
	initDate()
})
</script>

<template>
	<div class="pages">
		<van-nav-bar class="title" title="新增请假" left-text="返回" left-arrow @click-left="goBack" />
		<div class="content">
			<van-form @submit="onSubmit">
				<van-cell-group inset>
					<van-field v-model="form.userName" readonly label-width="学号" />
					<van-field v-model="form.realName" readonly label-width="姓名" />
					<van-field v-model="form.faculty" readonly label-width="院系" />
					<van-field v-model="form.major" readonly label-width="专业" />
					<van-field v-model="form.className" readonly label-width="班级" />
					<van-dropdown-menu>
						<van-dropdown-item
							v-model="form.courseId"
							:options="courseList"
							@change="changeCourse"
						></van-dropdown-item>
					</van-dropdown-menu>
					<van-dropdown-menu>
						<van-dropdown-item
							v-model="form.courseTime"
							:options="courseTimeList"
							@change="changeCourseTime"
						></van-dropdown-item>
					</van-dropdown-menu>
					<van-radio-group style="margin-top: 20px" v-model="form.leaveType" direction="horizontal">
						<van-radio name="事假">事假</van-radio>
						<van-radio name="病假">病假</van-radio>
					</van-radio-group>
					<van-field
						v-model="form.reason"
						style="border: 1px solid #ddd; margin-top: 30px"
						rows="4"
						autosize
						type="textarea"
						maxlength="100"
						placeholder="请假原因"
						show-word-limit
					/>
				</van-cell-group>
				<div style="margin: 16px">
					<van-button round block type="primary" native-type="submit">提交</van-button>
				</div>
			</van-form>
		</div>
	</div>
</template>

<style scoped lang="scss"></style>
